<template>
	<div class="alls">
		<div style="display: flex; justify-content: space-between;">
			<div style="color: #5A5A5A; font-weight: bold; font-size: 0.3rem;">您有以下流量卡已换卡</div>
			<div style="color: #5A5A5A; font-weight: bold; font-size: 0.3rem; ">账户余额：<span style="color:#FF3640;">{{person.money}}</span>元</div>
		</div>
		
		<div style="font-size: 12px; color: #FF6367; margin: 0.2rem 0;">提示：请在下方输入您收到的卡板背面的9位数字校对</div>
		
		<div class="list">
			<van-checkbox-group v-model="list" @change="xuanzhong">
			  <van-cell-group>
				<div v-for="(item, index) in kalist" clickable :key="index" style="margin-bottom: 0.3rem; border-radius: 0.1rem;">
					<div style="background: #FFFFFF; border-radius: 0.1rem;">
						<div style=" margin-bottom: 0.3rem; padding: 0.3rem;">
								<div style="display: flex; margin-bottom: 0.2rem;">
									<div style="color: #666666; font-size: 0.25rem; margin-right: 0.2rem; font-weight: bold;">卡{{index+1}}</div>
									<div style="color: #666666; font-size: 0.25rem;">当前套餐：</div>
									<div style="color: #666666; font-size: 0.25rem;">{{item.title}}</div>
								</div>
								<div style="color: #93959B; margin-bottom: 0.2rem;">原ICCID：{{item.oldIccid}}</div>
								<div style="margin-bottom: 0.2rem; display: flex; line-height: 24px;" >
									<van-field v-model="item.iccid9" @input="change()" placeholder="请输入收到的卡板背面9位数字" />
								</div>
								
								<!-- <div style="display: flex; justify-content: flex-end;">
									<div :class="list.includes(item.iccid)?'xz':''" style="background: #FFFFFF; color: #7B8294; padding: 0.1rem 0.2rem; border: 1px #7B8294 solid; border-radius: 0.05rem; display: flex;">
										<template>
										  <van-checkbox  :name="item.iccid" checked-color="#25C55A" />
										</template>
										<div style="margin-left: 0.1rem;">确认一致</div>
									</div>
									<div @click="xiugai(item.iccid)" style="background: #7B8294; color: #FFFFFF; padding: 0.1rem 0.2rem; border-radius: 0.05rem; margin-left: 0.2rem;">不一致</div>
								</div> -->
							
						</div>
					</div>
			      
			    </div>
			  </van-cell-group>
			</van-checkbox-group>
		</div>
		<van-button type="primary" color="#FF6367" block :disabled="!jinyong" @click="jihuo">激活新流量卡</van-button>
		
		<van-dialog v-model="show" title="提示" show-cancel-button @confirm="quding">
			<div style="padding: 0.2rem 0.5rem;">
				 <!-- <van-field v-model="iccid" placeholder="修改ICCID" /> -->
				 提示卡号与收到卡号不一致请联系客服！
			</div>
		 
		</van-dialog>
		<van-popup v-model="ing">
			<van-loading size="24px" color="#fff" vertical>加载中...</van-loading>
		</van-popup>
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import bus from '@/assets/bus.js'
	export default {
		name: 'gaitaocan',
		components: {
			top
		},
		data() {
			return {
				show:false,
				iccid:"",
				value: "",
				ke: true,
				radio: '',
				ing: true,
				list:[],
				kalist:[],
				jinyong:false,
				person:""
			}
		},
		watch: {
			// num:function(newValue, oldValue) {
			//   console.log(newValue, oldValue)
			// }
		},
		computed: {
			// zongjia:function(){
			//   return this.num * 100
			// }
		},
		async created() {
			await this.gettaocan()
			await this.getyonghu()
			this.ing = false
		},
		methods: {
			change:function(){
				for(let i in this.kalist){
					if(this.kalist[i].iccid9.length == 9){
						this.jinyong = true
					}else{
						this.jinyong = false
						return false
					}
				}
			},
			jihuo:function(){
				for(let i in this.kalist){
					this.list.push(this.kalist[i].iccid9)
				}
				console.log(this.list)
				this.ing = true
				this.axios.post(this.url+`/mobile/api/startNewCard?iccids=${this.list}`)
					.then(response => {
						if(response.data.success == true){
							this.$toast('已提交成功');
							setTimeout(() => {
								this.$router.push('/')
							},1000)
							this.ing = false
						}else{
							this.$dialog.alert({
							  message: response.data.message,
							}).then(() => {
							  location.reload()
							});
							
							this.ing = false
						}
					})
			},
			getyonghu:function(){
				this.axios.get(this.url+`/mobile/api/getCountInfo`)
					.then(response => {
						
						if(response.data.success == true){
							this.person = response.data.result
							
						}else{
							this.$toast(response.data.message);
						}
					})
			},
			xiugai:function(){
				this.show = true
			},
			quding:function(){
				console.log(1)
			},
			xuanzhong:function(){
				if(this.list.length == this.kalist.length){
					this.jinyong = true
				}else{
					this.jinyong = false
				}
				console.log(this.list)
			},
			gettaocan: function() {
				this.axios.get(this.url + `/work/awbChangeCard/list`)
					.then(response => {
						if(response.data.success == true){
							this.$dialog.confirm({
							  title: '重要提示',
							  message: '请确认收到新卡后再进行绑卡操作，绑卡后原卡板无法正常使用',
							})
							.then(() => {
							    
							})
							this.kalist = response.data.result
							for(let i in this.kalist){
								this.$set(this.kalist[i],'iccid9','')
							}
							console.log(this.kalist)
							this.ing = false
						}else{
							this.$toast(response.data.message);
							this.ing = false
						}
					})
			},
			genggai: function() {
				this.axios.post(this.url + `/mobile/api/changePackage?package_id=${this.radio}&iccid=` + this.$route.query.canshu)
					.then(response => {
						if(response.data.success == true){
							this.$toast('已更改');
							setTimeout(() => {
								this.$router.push('/')
							},1000)
						}else{
							this.$toast(response.data.message);
						}
					})
			},
			
		},

	}
</script>

<style scoped lang="less">
	.alls {
		padding: 0.3rem;
		background: #efefef;
		font-size: 0.28rem;
		min-height: 100vh;
		.xz{ border: 1px #25C55A solid !important; color:#25C55A !important;}
		.van-button__text{ }
		.van-cell-group{ background: transparent;}
		.van-popup{ background: transparent;}
		.van-loading__text{ color: #FFFFFF;}
		.name {
			font-weight: bold;
		}

		.van-cell {
			 height:auto; padding: 0.1rem 0.2rem; border: 1px #eaeaea solid; border-radius: 0.1rem;
		}

		.con {
			margin-top: 20px;
		}

		.k2 {
			margin: 0.6rem 0;
		}

		.btn2 {
			background: #EDEDED !important;
			color: #A9A9A9 !important;
		}

		.l1 {
			color: #FF6367;
			font-size: 0.28rem;
			margin-bottom: 0.2rem;
		}

		.l2 {
			margin-bottom: 0.1rem;
		}

		.van-cell:not(:last-child)::after {
			left: 0;
		}
	}
</style>
